<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <!--<select id="province" @change="changePro(this.value)">
        <option v-for="pro in proArr" value="pro.id">{{pro.name}}</option>
    </select> 省-->

    <el-select v-model="id" placeholder="请选择" @change="changePro()">
        <el-option v-for="pro in proArr"
                :label="pro.name"
                :value="pro.id">
        </el-option>
    </el-select> 省
    <el-select v-model="id" placeholder="请选择" @change="changePro()">
        <el-option v-for="pro in proArr"
                   :label="pro.name"
                   :value="pro.id">
        </el-option>
    </el-select> 市
    <!--<select id="city" onchange="changeCity(this.value)">
        <option>-&#45;&#45;请选择城市-&#45;&#45;</option>
    </select> 市
    <select id="xian">
        <option>-&#45;&#45;请选择城县/区-&#45;&#45;</option>
    </select> 县/区-->
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            proArr:[
                {id:2,pid:1,name:"河北"},
                {id:3,pid:1,name:"河南"},
                {id:4,pid:1,name:"山东"},
                {id:5,pid:1,name:"山西"}
            ],
            id:'',
            cityArr:[],
            xianArr:[]
        },
        methods:{
            changePro(){
                alert(this.id);
            }
        },
        created() {
            // vue对象创建成功后,调用selectByPage函数,完成分页查询学生信息
            // 发送ajax请求查询所有省份信息
        }
    });
</script>
</html>